<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>打地鼠</title>
    <style>
        body{
            margin: 0;
            background-image: url(image/bg.jpg); 
            /*用户点击老鼠，不会选中图片*/
            -moz-user-select: none;
            -webkit-user-select: none;
            cursor: url(image/cursor.png),auto;
        }
        table{
            margin: 0 auto;
            text-align: center;
            /*border: 2px solid orangered;*/
            border-collapse: collapse;
        }
        td{
            width: 200px;
            height: 180px;
            /*border: 1px solid orange;*/
            background-image: url(image/hole.png);
            background-repeat: no-repeat;
            background-size: 150px 50px;
            background-position: bottom;
        }
        img{
            width: 105px;
            height: 95px;
            position: relative;
            top: 30px;

            transition: all 0.5s linear;
            transform: scale(1,0);
            transform-origin: 50% 100%;
        }
        .show{
            transform: scale(1,1);
        }
        span,button{
            /*position: absolute;*/
            text-align: center;
            display: inline-block;
            width: 250px;
            height: 80px;
            background-color: rgba(0, 0, 0, 0.2);
            font-size: 40px;
            font-weight: 700;
            line-height: 80px;
            margin: 10px;
            margin-left: 40px;
            font-family: 楷体;
            border-top-left-radius: 25px;
            border-bottom-right-radius: 25px;
            border: none;
        }
        button{
            float: right;
            cursor: pointer;
            margin-right: 40px;
        }
    </style>
</head>
<body>
    <audio id="yinxiao" src="audio/dazhong.wav"></audio>

    <audio src="audio/music.mp3" autoplay loop></audio>

    <span id="score">得分: 0</span>   
    <button onclick="restart()">再来一次</button>
    <table>
        <tr>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
        </tr>
        <tr>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
        </tr>
        <tr>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
        </tr>
        <tr>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
            <td>
                <img src="image/mouse.png"></img>
            </td>
        </tr>
    </table>

    <script>
        var mouses = document.getElementsByTagName("img");

        function restart(){
            window.location.reload();
        }


        function showOne(){
            var n = Math.random();
            n = n*16;
            n = Math.floor(n);

            mouses[n].classList.add("show");
            mouses[n].touch = true;
            
            function hide(){
                mouses[n].classList.remove("show");
            }

            setTimeout(hide,2500);
        }
        function showSome(){
            setTimeout(showOne(),1000);
            setTimeout(showOne(),2000);
            setTimeout(showOne(),3000);
            setTimeout(showOne(),4000);
            setTimeout(showOne(),1500);          
        }
        
        setInterval(showSome,2450);

        var player = document.getElementById("yinxiao");

        var grade = document.getElementById("score");
        var score = 0;

        for(var i = 0;i<mouses.length;i++){
            function mouseDown(e){
                e.target.classList.remove("show");
                // 播放打中音效
                player.load();
                player.play();

                if(e.target.touch){
                    score = score+10;
                    grade.textContent = "得分: "+score;
                    e.target.touch =false;
                }
            }

            mouses[i].onclick = mouseDown;
        }

        document.body.onmouseup = function(e){
            document.body.style.cursor = "url(image/cursor.png),auto";
        }

        document.body.onmousedown = function(e){
            document.body.style.cursor = "url(image/cursor-down.png),auto";
        }

        document.body.ondrop = function(e){
            // 停止增殖，拖拽图片不会再出现新页面
            e.stopPropagation();
            // 阻止默认值
            e.preventDefault();
        }

        setTimeout(function(){
            alert("一分钟时间到！您的得分是 "+score);
        },1000*60);
    
    </script>












</body>
</html>